<ion-content>
  <div style="margin-top: 20px;"></div>
  <ion-card>
    <div class="row">
      <div class="col-span-12">
        <a class="dashboard-stat bg-danger1" href="#">
          <span class="number1">200,000元</span>
          <span class="name1">本月完成理财销售业绩</span>
          <div echarts [options]="circlechartOption1" class="demo-circle-chart"></div>
        </a>
      </div>
    </div>
  </ion-card>

  <ion-card>
    <div class="row">
      <div class="col-span-12">
        <a class="dashboard-stat bg-primary1" href="#">
          <span class="number1">1,200,000元</span>
          <span class="name1">本月完成贷款额度</span>
          <div echarts [options]="circlechartOption" class="demo-circle-chart"></div>
        </a>
        <!-- /.dashboard-stat -->
      </div>
    </div>
  </ion-card>


  <ion-grid>
    <ion-row style="font-size:12px;">
      <ion-col size="12">
        <ion-card>
          <ion-card-header>
            <ion-card-title style="font-size:14px;">任务进度</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <div class="row middle-span">
              <div style="font-size: 12px;font-weight: bolder;">本月完成进度</div>
              <div class="progress-container col-span ion-padding">
                <nzm-progress
                  [percent]="42"
                  [position]="'normal'"
                ></nzm-progress>
              </div>
              <div>42%</div>
            </div>
            <div class="row middle-span">
              <div style="font-size: 12px;font-weight: bolder;">本季完成进度</div>
              <div class="progress-container col-span ion-padding">
                <nzm-progress
                  [percent]="21"
                  [position]="'normal'"
                ></nzm-progress>
              </div>
              <div>12%</div>
            </div>
          </ion-card-content>
        </ion-card>
      </ion-col>


      <ion-col size="12">
        <ion-card>
          <ion-card-header>
            <ion-card-title style="font-size:14px;">客户签约转化率（30天）</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <div
              echarts
              [options]="funnelOption"
              class="demo-chart"
              style="height:340px;"
            ></div>
          </ion-card-content>
        </ion-card>
      </ion-col>

      <ion-col size="12">
        <ion-card>
          <ion-card-header>
            <ion-card-title style="font-size:14px;">综合绩效评分（30天）</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <div
              echarts
              [options]="option"
              class="demo-chart"
              style="height:340px;"
            ></div>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col size="12">
        <ion-card>
          <ion-card-header>
            <ion-card-title style="font-size:14px;">历史绩效</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <div>
              <div class="ion-padding row between-span">
                <div>2019-06</div>
                <a style="font-size: 12px;"
                  [routerLink]="[
                    '/marketing/performance-detail',
                    { date: '2019-06' }
                  ]"
                  >查看</a
                >
              </div>
              <div class="ion-padding row between-span">
                <div>2019-05</div>
                <a style="font-size: 12px;"
                  [routerLink]="[
                    '/marketing/performance-detail',
                    { date: '2019-05' }
                  ]"
                  >查看</a
                >
              </div>
              <div class="ion-padding row between-span">
                <div>2019-04</div>
                <a style="font-size: 12px;"
                  [routerLink]="[
                    '/marketing/performance-detail',
                    { date: '2019-04' }
                  ]"
                  >查看</a
                >
              </div>
            </div>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
